import NavBar from '@/components/NavBar';
import { useAppSelector } from '@/store';
import { editUserPhoto, editUserProfile, getProfileInfo } from '@/store/action/user';
import { List, Popup, Toast } from 'antd-mobile';
import { useEffect, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import styles from './index.module.scss';

type EditType = 'photo' | 'gender';

export default function ProfileEdit() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getProfileInfo());
  }, [dispatch]);
  const { profile } = useAppSelector((state) => state.user);

  const [visible, setVisible] = useState(false);

  const uploadRef = useRef<HTMLInputElement>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const formData = new FormData();
      formData.append('photo', e.target.files[0]);
      dispatch(editUserPhoto(formData));
      setVisible(false);
      Toast.show('更新成功');
    }
  };
  /*
    学习目标：实现编辑性别
  */

  const [editType, setEditType] = useState('' as EditType);
  const handleEdit = (type: EditType) => {
    setEditType(type);
    setVisible(true);
  };
  const handleEditProfie = (gender: number) => {
    dispatch(editUserProfile({ gender }));
    setVisible(false);
    Toast.show('更新成功');
  };

  const renderModifyNode = (editType: EditType) => {
    switch (editType) {
      case 'photo':
        return (
          <>
            <div className="list-item" onClick={() => uploadRef.current?.click()}>
              拍照
            </div>
            <div className="list-item">本地选择</div>
            <div onClick={() => setVisible(false)} className="list-item">
              取消
            </div>
          </>
        );

      case 'gender':
        return (
          <>
            <div className="list-item" onClick={() => handleEditProfie(1)}>
              男
            </div>
            <div className="list-item" onClick={() => handleEditProfie(2)}>
              女
            </div>
          </>
        );
      default:
        return null;
    }
  };
  return (
    <div className={styles.root}>
      <div className="content">
        <NavBar>个人资料</NavBar>

        <div className="wrapper">
          <List className="profile-list">
            <List.Item
              onClick={() => handleEdit('photo')}
              arrow
              extra={<img className="avatar" src={profile.photo} alt="" />}
            >
              头像
            </List.Item>

            <List.Item arrow extra={profile.name}>
              昵称
            </List.Item>
            <List.Item arrow extra={<span className="intro">{profile.intro || '未填写'}</span>}>
              简介
            </List.Item>

            <List.Item arrow extra={profile.gender} onClick={() => handleEdit('gender')}>
              性别
            </List.Item>
            <List.Item arrow extra={profile.birthday}>
              生日
            </List.Item>
          </List>

          <input
            onChange={(e) => handleFileChange(e)}
            ref={uploadRef}
            className="avatar-upload"
            type="file"
            accept=".png,.jpg"
          />
        </div>

        <div className="logout">
          <button className="btn">退出登录</button>
        </div>
      </div>
      <Popup
        visible={visible}
        onMaskClick={() => setVisible(false)}
        position="bottom"
        bodyClassName="popup-bottom-list"
      >
        {renderModifyNode(editType)}
      </Popup>
    </div>
  );
}
